/******************** 变量 ********************/
$lv-message-title-color: $text-color !default;
$lv-message-content-color: $text-color-secondary !default;

$lv-message-default-border-color: transparent !default;
$lv-message-information-border-color: transparent !default;
$lv-message-success-border-color: transparent !default;
$lv-message-warning-border-color: transparent !default;
$lv-message-error-border-color: transparent !default;

$lv-message-default-bg-color: $popup-background !default;
$lv-message-information-bg-color: $popup-background !default;
$lv-message-success-bg-color: $popup-background !default;
$lv-message-warning-bg-color: $popup-background !default;
$lv-message-error-bg-color: $popup-background !default;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-message {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  color: $text-color;
  font-weight: $font-weight-regular;
  font-size: $font-size-base;
  line-height: $line-height-coeff;

  > .lv-message-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: $padding-md;
    border: $border-width-base $border-style-base $lv-message-default-border-color;
    transform-origin: 0% 0%;

    @include panel-notification-style;

    > .lv-message-title {
      display: flex;
      align-items: center;
      margin-bottom: 0.01rem;

      > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        height: $height-sm;
        white-space: nowrap;
        margin-right: $margin-lg;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        line-height: $line-height-lg;
        color: $lv-message-title-color;
      }

      > i {
        display: flex;
        margin-right: $margin-sm;

        @include icon-size-md;
      }
    }

    > .lv-message-content {
      flex-shrink: 0;
      width: 100%;
      min-width: 100%\0;
      margin-top: 0.01rem;
      color: $lv-message-content-color;
      word-break: break-word;
      word-wrap: break-word;
      word-wrap: normal\0;
      white-space: pre-wrap; // TODO: 影响了使用html设置内容时，标签换行会造成样式异常，当前浏览器不再需要，待浏览器版本稳定后再做修复
    }

    > .lv-message-content-indent {
      padding-left: $padding-xl;
    }

    > .lv-message-title + .lv-message-content {
      margin-top: $margin-sm;
    }

    &.lv-message-information {
      border-color: $lv-message-information-border-color;
      background: $lv-message-information-bg-color;
    }

    &.lv-message-success {
      border-color: $lv-message-success-border-color;
      background: $lv-message-success-bg-color;
    }

    &.lv-message-warning {
      border-color: $lv-message-warning-border-color;
      background: $lv-message-warning-bg-color;
    }

    &.lv-message-error {
      border-color: $lv-message-error-border-color;
      background: $lv-message-error-bg-color;
    }

    > .lv-message-close-button {
      position: absolute;
      right: 0.16rem;
      top: 0.2rem;
      line-height: 0;
      @include icon-size;
      > i {
        @include icon-size;
        @include motion-state;
      }
    }
  }

  > .lv-message-wrapper-simple {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;

    > .lv-message-icon {
      display: flex;
      flex-shrink: 0;
      @include icon-size-md;
      align-items: center;
      margin-right: $margin-sm;

      > i {
        @include icon-size-md;
      }
    }

    > .lv-message-content {
      flex: 1 1 auto;
      margin-right: $margin-lg;
    }
  }
}

.lv-message-queue-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

// Overlay container
.lv-message-container {
  z-index: $zindex-message;

  .lv-message {
    margin-top: $margin-md;
  }
}

.lv-message-container-topCenter,
.lv-message-container-topLeft,
.lv-message-container-topRight {
  top: 0.48rem;
  left: 0;
  right: 0;
  height: 0;
}

.lv-message-container-topLeft {
  left: 0.32rem;

  .lv-message-queue-container {
    align-items: flex-start;
  }
}

.lv-message-container-topRight {
  right: 0.32rem;

  .lv-message-queue-container {
    align-items: flex-end;
  }
}
